<template>
  <div class="sendIndex">
    <header>
      <div class="top">
        <span class="title">订单处理</span>
        <div class="userInfo" @click="showPopup">
          <div class="userImg">
            <img :src="$store.state.userInfo.avatar" alt="" />
          </div>
          <span>{{$store.state.userInfo.nickname}}</span>
        </div>
      </div>
      <div class="tab">
        <router-link v-for="(x,y) in tab" :to="x.page" tag="div" class="tab_box" :key="y" replace>
          <p :class="x.page != present?'selected':''">{{x.text}}</p>
          <transition name="el-zoom-in-center">
            <p v-show="x.page == present"></p>
          </transition>
        </router-link>
      </div>
    </header>
    <router-view></router-view>
    <van-popup v-model="show" position="left" :style="{ width: '70%',height:'100%' }" >
      <div class="my">
        <router-link tag="div" class="user" to="/views/Send/setting">
          <div class="userImg">
            <img :src="$store.state.userInfo.avatar" alt="" />
          </div>
          <div class="username">
            <div>{{$store.state.userInfo.nickname}}</div>
            <div>{{phone}}</div>
          </div>
          <van-icon name="arrow" color="#999999" size="16" />
        </router-link>
        <div class="status">
          <div>
            <div class="top_icon">
              <img src="../../../static/img/send/work.png" alt="" />
            </div>
            <div>开工</div>
          </div>
          <div>
            <div class="top_icon">
              <img src="../../../static/img/send/xiuxi.png" alt="" />
            </div>
            <div>忙碌</div>
          </div>
          <div>
            <div class="top_icon">
              <img src="../../../static/img/send/busy.png" alt="" />
            </div>
            <div>收工</div>
          </div>
        </div>
        <div class="navList">
          <router-link class="nav" tag="div" to="/views/Send/statistics">
            <div>
              <img src="../../../static/img/send/ps.png" alt="" />
            </div>
            <div>配送统计</div>
          </router-link>
          <router-link class="nav" tag="div" to="/views/Send/account">
            <div>
              <img src="../../../static/img/send/account.png" alt="" />
            </div>
            <div>我的账户</div>
          </router-link>
          <router-link class="nav" tag="div" to="/views/Send/commit">
            <div>
              <img src="../../../static/img/send/commit.png" alt="" />
            </div>
            <div>评价记录</div>
          </router-link>
          <router-link class="nav" tag="div" to="/views/Send/information">
            <div>
              <img src="../../../static/img/send/notice.png" alt="" />
            </div>
            <div>通知</div>
          </router-link>
          <router-link class="nav" tag="div" to="/views/Send/information">
            <div>
              <img src="../../../static/img/send/card.png" alt="" />
            </div>
            <div>银行卡</div>
          </router-link>
          <router-link class="nav" tag="div" to="/views/Send/information">
            <div>
              <img src="../../../static/img/send/team.png" alt="" />
            </div>
            <div>推广中心</div>
          </router-link>
          <div class="nav">
            <div>
              <img src="../../../static/img/send/service.png" alt="" />
            </div>
            <div>联系客服</div>
          </div>
        </div>
      </div>
<!--      <div style="width: 100%;height: 1px;"></div>-->
    </van-popup>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Popup,Icon } from 'vant';

  Vue.use(Popup);
  Vue.use(Icon);

  export default {
    name: "sendIndex",
    data() {
      return {
        tab: [
          {text: '新订单', page: '/components/SendComponents/order/new'},
          {text: '待配送', page: '/components/SendComponents/order/wait'},
          {text: '配送中', page: '/components/SendComponents/order/ing'},
          {text: '已完成', page: '/components/SendComponents/order/complete'}
        ],
        show: false,
        phone:'',
        present: '/components/SendComponents/order/new',
      }
    },
    created() {
      // console.log(this.$store.state.userInfo);
      console.log(this.$store.state.userInfo);
      this.$myAxios('courier/user/editCourierInfo','get',{
        token: this.$store.state.userInfo.token_lt
      }).then(res=>{
        console.log(res);
        this.phone = res.data.data.phone;
      });
    },
    methods: {
      back() {
        this.$router.back();
      },
      showPopup() {
        this.show = true;
      },
    },
    mounted() {
      this.present = this.$route.path;
    },
    watch: {
      $route(to, from) {
        this.present = to.path;
      }
    }
  }
</script>

<style scoped>
  .sendIndex{
    background: #F5F5F5;
    min-height: 5.7rem;
    padding-top: .96rem;
  }

  .sendIndex header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    flex-flow: row;
    box-sizing: border-box;
  }
  .sendIndex header .top{
    height: .5rem;
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: space-between;*/
    background: #262A36;
    padding: 0 .1rem;
    position: relative;
  }
  .sendIndex header .top span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
    flex-grow: 1;
  }
  .sendIndex header .top .title{
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .5rem;
    line-height: .5rem;
  }
  .sendIndex header .top div img {
    width: 100%;
  }
  .sendIndex header .top .userInfo{
    display: flex;
    align-items: center;
    height: .5rem;
    justify-content: flex-start;
    position: relative;
  }
  .sendIndex header .top .userInfo .userImg{
    width: .3rem;
    height: .3rem;
    border-radius: .15rem;
    overflow: hidden;
    margin-right: .1rem;
  }
  .sendIndex header .top .userInfo span{
    font-size: .12rem;
    flex-grow: 1;
  }


  /* 订单分类部分 */
  .sendIndex .tab {
    width: 100%;
    height: 100%;
    max-height: .45rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
  }

  .sendIndex .tab_box {
    height: 100%;
    max-height: .55rem;
    padding: 0 .1rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    /*align-items: center;*/
    box-sizing: border-box;
    text-align: center;
  }

  .sendIndex .tab_box > p:nth-child(1) {
    color: #000000;
    font-size: .16rem;
    line-height: .16rem;
    padding: .15rem .1rem .13rem;
    font-weight: bold;
  }

  .sendIndex .tab_box > p:nth-child(2) {
    width: 100%;
    height: .02rem;
    background-color: #FFC600;
    border-radius: .01rem;
  }


  .sendIndex .el-loading-spinner {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 5rem;
  }

  .sendIndex .selected {
    color: #333333 !important;
    font-size: .16rem !important;
    font-weight: normal !important;
  }

  /**左侧用户弹出层**/
  .sendIndex .my{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #F4F4F4;
  }
  .sendIndex .my .user{
    display: flex;
    padding: .7rem .15rem .24rem;
    background-color: #252A37;
    color: #ffffff;
    justify-content: space-between;
    align-items: center;
  }
  .sendIndex .my .user .username{
    flex-grow: 1;
    margin-left: .1rem;
    font-size: .14rem;
  }
  .sendIndex .my .user .username div:nth-child(1){
    margin-bottom: .05rem;
  }
  .sendIndex .my .user .userImg{
    width: .42rem;
    height: .42rem;
    border-radius: .21rem;
    overflow: hidden;
  }
  .sendIndex .my .status{
    display: flex;
    justify-content: space-around;
    padding: .15rem 0;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }
  .sendIndex .my .status div .top_icon{
    width: .2rem;
    height: .2rem;
    margin-bottom: .1rem;
  }
  .sendIndex .my .navList{
    background-color: #ffffff;
  }
  .sendIndex .my .navList .nav{
    padding: .12rem .16rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEBEB;
  }
  .sendIndex .my .navList .nav div:nth-child(1){
    margin-right: .1rem;
    width: .18rem;
    height: .18rem;
  }
</style>
